<!--
 * @Description: 
 * @Author: maskMan
 * @LastEditTime: 2024-11-19 13:24:10
-->
<template>
  <div class="app-container">
    <el-tree ref="tree2" :data="testData" class="filter-tree" />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
  name: 'Tree'
})
export default class extends Vue {
  @Prop() roleStruct!: TRole.RoleStruct;
  public testData = [];
  public treeData = [
    {
      id: 1,
      label: 'Level one 1',
      children: [
        {
          id: 4,
          label: 'Level two 1-1',
          children: [
            {
              id: 9,
              label: 'Level three 1-1-1'
            },
            {
              label: 'Level three 1-1-2'
            }
          ]
        }
      ]
    },
    {
      id: 2,
      label: 'Level one 2',
      children: [
        {
          id: 5,
          label: 'Level two 2-1'
        },
        {
          id: 6,
          label: 'Level two 2-2'
        }
      ]
    },
    {
      id: 3,
      label: 'Level one 3',
      children: [
        {
          id: 7,
          label: 'Level two 3-1'
        },
        {
          id: 8,
          label: 'Level two 3-2'
        }
      ]
    }
  ];
  private _count = 0;
  private _forTree(item, arry = []) {
    for (const key in item) {
      const obj = {
        id: ++this._count,
        label: key
      };
      arry.push(obj);
      if (item[key] && typeof item[key] == 'object') {
        obj['children'] = [];
        if (item[key] instanceof Array) {
          for (let index = 0; index < item[key].length; index++) {
            const child = {
              id: this._count++,
              label: item[key][index]
            };
            obj['children'].push(child);
          }
        } else {
          this._forTree(item[key], obj['children']);
        }
      }
    }
  }
  created() {
    this._count = 0;
    this.testData = [];
    const dd = this._forTree(this.roleStruct, this.testData);
    // for (const key in this.roleStruct) {
    //   const obj = {
    //     id: ++this._count,
    //     label: key
    //   };
    //   if (this.roleStruct[key] && typeof this.roleStruct[key] == 'object') {
    //     obj['children'] = [];
    //     if (this.roleStruct[key] instanceof Array) {
    //       for (let index = 0; index < this.roleStruct[key].length; index++) {
    //         const child = {
    //           id: ++this._count,
    //           label: this.roleStruct[key][index]
    //         };
    //         obj['children'].push(child);
    //       }
    //     } else {
    //       return this._forTree(this.roleStruct[key], obj['children']);
    //     }
    //   }
    //   const temp = this._forTree(this.roleStruct[key]);
    //   this.treeData.push(temp);
    // }
    //  for (let index = 0; index < array.length; index++) {
    //   const element = array[index];
    //  }
  }
}
</script>
